<template>
	<div class="column">
		<div class="column-more" v-if="listQuery.isUpdate != 1">
		<!-- <el-tag>{{item.status|statusfilters}}</el-tag> -->
		<el-tag :type="item.status == '00'?'success':item.status == '01'?'warning':item.status == '02'?'':item.status == '05'?'danger':item.status == '04'?'success':item.status == '06'?'warning':item.status == '07'?'info':'info'" class="column-more-status" >{{item.status|statusfilters}}</el-tag>
			<folderPopover  :documentType="documentType" :functionIndex="functionIndex" :treeData="item" :listQuery="listQuery"></folderPopover>
    </div>
		<div class="column-img" @click="documentClick(item)">
      <!-- <el-image style="width: 100%;height: 100%;" :src="folderImg"></el-image> -->
      <el-image  style="width: 100%;height: 100%;" :src="fileImg"></el-image>
		</div>
		<span class="column-title" @click="documentClick(item)">{{item.name}}</span>
	</div>
</template>

<script>
	import folderPopover from '../components/folderPopover.vue'
	export default{
		data(){
			return{
				folderImg:require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
				fileImg:require("../../../../img/140a48decfb0a656a23a22e2cbb6bee8.svg"),
				filePdfImg:require('../../../../img/1a69b207d1bac0dc2f5ae970b86580c2.svg')
			}
		},
		filters: {
			statusfilters(val){
      		if(val=='00'){return '已上传'}
      		else if(val=='01'){return '待审批'}
      		else if(val=='02'){return '审批中'}
      		else if(val=='05'){return '已驳回'}
      		else if(val=='04'){return '已审批'}
      		else if(val=='06'){return '已过期'}
      		else if(val=='07'){return '已作废'}
    },
		},
		components:{
			folderPopover
		},
		props:['item','listQuery','functionIndex','documentType'],
		methods:{
			// 预览文档
			documentClick(item){
			  // console.log(item)
				var _this = this
				if(item.type == 'dir'){
				  this.$emit('dirClick',item)
					// window.open(item.filePath, '_system') //url为访问的地址
				}else{
					// window.open('https://view.officeapps.live.com/op/view.aspx?src=' + item.filePath)
					
				}
			},
		}
	}
</script>

<style scoped>
	.column {
		position: relative;
		width: 160px;
		height: 185px;
		border: 1px solid #e3e9ed;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.column-more {
		/* position: absolute;

		right: 0;
		top: 0;
		padding: 10px 12px; */
		display: flex;
		    width: 100%;
    justify-content: space-around;
	}


	.column-img{
		width: 70px;
		height: 70px;
		cursor: pointer;
	}

	.column-title{
		padding: 0 10px;
	    width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #2e405e;
		font-size: 12px;
		margin-top: 12px;
		text-align: center;
		cursor: pointer;
	}

	.column-title:hover{
		color: #2C7EF8;
	}
</style>
